<template>
  <el-card>
    <div class="itemize">
      <h5>商品分类</h5>
      <el-button type="primary" size="mini" @click="addshop"
        >添加分类</el-button
      >
    </div>

    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index" width="180">
        </el-table-column>

        <el-table-column label="分类名称" size="mini" width="260px">
          <template slot-scope="data">
            <span v-show="!data.row.isedit"> {{ data.row.cateName }} </span>
            <el-input
              v-show="data.row.isedit"
              v-model="data.row.cateName"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column label="是否启用">
          <!-- 动态获取 开关值 -->
          <template slot-scope="e"
            ><el-switch
              :disabled="!e.row.isedit"
              v-model="e.row.state"
              active-color="#13ce66"
              inactive-color="#455a64"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="eh">
            <el-button
              plain
              size="mini"
              v-show="!eh.row.isedit"
              @click="compile(eh.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="success"
              style="margin: 0"
              v-show="eh.row.isedit"
              @click="clickcompile(eh.row)"
              >完成</el-button
            >
            <el-button type="danger" size="mini" @click="cancel(eh.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页脚 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesizess"
        layout="total, prev, pager, next, jumper"
        :total="tota"
      >
      </el-pagination>
    </div>
    <!-- 添加商品 -->
    <el-dialog title="添加商品" :visible.sync="dialogFormVisible" width="600px">
      <p>分类名称<el-input style="width: 500px" v-model="kind"> </el-input></p>
      <p style="margin-top: 30px">
        是否启用
        <el-switch
          v-model="p"
          active-color="#13ce66"
          inactive-color="#455a64"
        ></el-switch>
      </p>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="click_add">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
  </el-card>
</template>

<script>
import { catelist, addcate, delcate, editcate } from "@/apis/shop";
export default {
  data() {
    return {
      nodename: "",
      yong: false,
      daname: false,
      c: true,
      kind: "",
      p: true,
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      currentPage: 1, //几页
      pagesizess: 5, //几条数据
      tota: 0,
      tableData: [],
    };
  },
  created() {
    this.load();
  },
  methods: {
    clickcompile(row) {
      row.isedit = true;
      editcate({
        id: row.id,
        cateName: row.cateName,
        state: row.isedit,
      }).then((res) => {
        if (res.data.code == 0) {
          this.load();
          this.$message({
            message: "添加成功",
            type: "success",
          });
        }
      });
    },
    // 编辑
    compile(row) {
      row.isedit = true;
      // this.dialogTableVisible = true;
      this.id = row.id;
      this.nodename = row.cateName;
      this.yong = row.state;
      console.log(row);
    },
    // 删除
    cancel(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delcate({ id: row.id }).then((res) => {
            if (res.data.code == 0) {
              this.load();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加商品
    click_add() {
      addcate({ cateName: this.kind, state: this.p }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.dialogFormVisible = false;
          this.load();
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.kind = "";
        }
      });
    },
    // 跳转条数
    handleSizeChange(newsize) {
      this.pagesizess = newsize;
      this.load();
    },
    // 跳转页数
    handleCurrentChange(newpage) {
      this.currentPage = newpage;
      this.load();
    },
    // 全局渲染函数
    load() {
      catelist({
        currentPage: this.currentPage,
        pageSize: this.pagesizess,
      }).then((res) => {
        for (const obj of res.data.data) {
          obj.state = obj.state == 1;
          obj.isedit = false;
        }
        this.tota = res.data.total;
        this.tableData = res.data.data;
        console.log(res);
      });
    },
    addshop() {
      this.dialogFormVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.itemize {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
  h5 {
    font-size: 14px;
    font-weight: normal;
  }
}
.el-card {
  background-color: #fff;
}
.page {
  margin-top: 20px;
}
</style>